<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高度模拟 Windows 10 桌面UI</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 引入lunar-calendar库 -->
    <script src="https://cdn.jsdelivr.net/npm/lunar-calendar@0.1.4/lib/LunarCalendar.min.js"></script>
    <style>
        /* =================== 基础样式 =================== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', system-ui, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            height: 100vh;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
        }
        
        /* =================== 颜色变量定义 =================== */
        :root {
            --taskbar: #1a1a1a;
            --calendar-bg: #2d2d2d;
            --calendar-border: #484848;
            --calendar-header: #3a3a3a;
            --today: #404040;
            --selected: #0066cc;
            --hover: #3e3e3e;
            --text-light: #f0f0f0;
            --text-gray: #cccccc;
            --green-400: #4ade80;
            --gray-500: #6b7280;
            --gray-600: #4b5563;
        }

        .desktop {
            width: 100vw;
            height: 100vh;
            background: url('https://images.unsplash.com/photo-1505506874110-6a7a69069a08?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1287&q=80') no-repeat center center;
            background-size: cover;
            position: relative;
            overflow: hidden;
        }
        
        .desktop-icons {
            position: absolute;
            top: 5px;
            left: 5px;
            bottom: 25px;
            display: grid;
            grid-template-rows: repeat(auto-fill, 80px);
            grid-auto-flow: column;
            grid-auto-columns: 70px;
            gap: 10px 10px;
            padding: 5px;
            max-height: calc(100% - 10px);
        }
        
        .desktop-icon {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 70px;
            cursor: pointer;
            padding: 8px;
            border-radius: 5px;
            transition: all 0.2s;
        }
        
        .desktop-icon:hover,
        .hover-effect:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        
        .desktop-icon.selected {
            background: rgba(50, 100, 200, 0.3);
        }
        
        .desktop-icon i {
            font-size: 32px;
            margin-bottom: 5px;
            color: white;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        }
        
        .desktop-icon span {
            font-size: 12px;
            text-align: center;
            color: white;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
        }
        
        /* 任务栏整体布局 */
        .taskbar {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 48px;
            background: rgba(30, 30, 30, 0.85);
            backdrop-filter: blur(10px);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 10px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 1000;
        }
        
        /* 左侧区域 */
        .taskbar-left { 
          display: flex;
          align-items: center;
          gap: 10px;  
        }

        /* 中间区域 */
        .taskbar-center { 
            display: flex;
            align-items: center;
            gap: 10px;
            flex: 1;
            justify-content: flex-start;
            padding-left: 10px;
            overflow: hidden;
        }

        /* 右侧系统托盘区 */
        .system-tray {
            display: flex;
            align-items: center;
            gap: 2px;
            margin-right: 15px;
            margin-left: auto;
        }

        .start-button,
        .taskbar-app,
        .tray-icon {
            width: 40px;
            height: 40px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: white;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .tray-icon {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.9);
        }
        
        /* 任务栏日历 */
        .calendar {
            height: 40px;
            width: 130px;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.9);
        }
        
        /* 日历弹窗样式 */
        .calendar-popup {
            position: absolute;
            bottom: 48px;
            right: 16px;
            background-color: var(--calendar-bg);
            border: 1px solid var(--calendar-border);
            border-radius: 4px;
            width: 320px;
            transform-origin: bottom right;
            opacity: 0;
            transform: scale(0.95);
            display: none;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
            transition: all 0.2s ease-in-out;
        }
        
        .calendar-popup.visible {
            display: block;
            animation: calendarShow 0.2s ease-in-out forwards;
        }
        
        .calendar-popup.hiding {
            animation: calendarHide 0.2s ease-in-out forwards;
        }

        /* 日历弹窗样式增强 */
        .calendar-header {
            background-color: var(--calendar-header);
            padding: 12px 16px;
            border-bottom: 1px solid var(--calendar-border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .month-nav {
            color: var(--text-light);
            background: none;
            border: none;
            padding: 4px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
        }

        .month-nav:hover {
            background-color: var(--hover);
        }

        /* 添加日期网格布局样式 */
        .date-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 4px;
        }

        .weekdays {
            padding: 12px 12px 0;
        }

        .weekday {
            text-align: center;
            font-size: 12px;
            color: var(--text-gray);
            padding: 4px 0;
        }

        #dates-grid {
            padding: 8px 12px;
        }

        .date-cell {
            height: 56px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            position: relative;
        }

        .date-cell.other-month {
            color: var(--gray-500);
        }

        .date-cell.current-month {
            color: var(--text-light);
            cursor: pointer;
        }

        .date-cell.today {
            background-color: var(--today);
            font-weight: 500;
        }

        .date-cell.selected {
            background-color: var(--selected);
        }

        .date-cell.current-month:not(.selected):not(.today):hover {
            background-color: var(--hover);
        }

        .solar-day {
            font-size: 14px;
        }

        .today .solar-day {
            font-weight: bold;
        }

        .lunar-info {
            font-size: 10px;
            margin-top: 2px;
        }

        .other-month .lunar-info {
            color: var(--gray-600);
        }

        .current-month .lunar-info {
            color: var(--text-gray);
        }

        .festival {
            color: var(--green-400) !important;
        }

        .divider {
            border-top: 1px solid var(--calendar-border);
            margin: 4px 0;
        }

        .Calendar-Control {
            font-size: 17px;
            padding: 8px;
            color: var(--text-light);
        }

        .Calendar-Type {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            padding-bottom: 5px;
            margin: 0 10px;
            border-bottom: 1px solid var(--calendar-border);
        }

        .Calendar-Weeks-Festival {
            display: flex;
            justify-content: space-between;
            margin: 0 10px;
            align-items: center;
        }

        .Date-Festivals {
            color: var(--green-400);  
        }

        .Date-Festivals.hidden,
        .hidden {
            display: none !important;
        }

        /* 日历显示动画 */
        @keyframes calendarShow {
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes calendarHide {
            to {
                opacity: 0;
                transform: scale(0.95);
            }
        }

        .window {
            position: absolute;
            width: 700px;
            height: 500px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            backdrop-filter: blur(10px);
            z-index: 10;
            transition: box-shadow 0.3s ease;
        }
        
        .window.active {
            z-index: 100;
        }
        
        .window-header {
            height: 32px;
            background: rgba(30, 30, 30, 0.9);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 10px;
            color: white;
            font-size: 15px;
            cursor: move;
            user-select: none;
        }
        
        .window.maximized .window-header {
            cursor: default;
        }
        
        .window-title {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .window-title i {
            font-size: 14px;
        }
        
        .window-controls {
            display: flex;
            gap: 5px;
        }
        
        .window-control {
            width: 30px;
            height: 20px;
            border-radius: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .window-control.close:hover {
            background: #e81123;
        }
        
        .window-content {
            flex: 1;
            padding: 10px;
            color: #333;
            overflow-y: auto;
        }
        
        .start-menu {
            position: absolute;
            bottom: 48px;
            left: 10px;
            width: 450px;
            height: 500px;
            background: rgba(30, 30, 30, 0.95);
            backdrop-filter: blur(20px);
            border-radius: 10px;
            display: none;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            z-index: 100;
        }
        
        .start-menu.active {
            display: flex;
        }
        
        .start-menu-header {
            padding: 30px 25px 15px;
            font-size: 24px;
            font-weight: 300;
        }
        
        .start-menu-apps {
            display: grid; 
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            padding: 15px;
            flex: 1;
        }
        
        .start-menu-app {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 90px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .start-menu-app:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        
        .start-menu-app i {
            font-size: 28px;
            margin-bottom: 8px;
        }
        
        .start-menu-app span {
            font-size: 12px;
        }
        
        .start-menu-footer {
            height: 60px;
            background: rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
        }

        .search-menu { 
            height: auto; 
            min-height: 50px;
            flex-direction: column;
            justify-content: center;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .power-options {
            display: flex;
            gap: 15px;
        }
        
        .power-option {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .power-option:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        
        h1 {
            margin-bottom: 15px;
            color: #2c3e50;
        }
        
        p {
            line-height: 1.6;
            margin-bottom: 15px;
        }
        
        .btn {
            background: #3498db;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        
        .btn:hover {
            background: #2980b9;
        }
        
        .content-area {
            padding: 20px;
        }
        
        .file-explorer {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 15px;
        }
        
        .file-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
        }
        
        .file-item:hover {
            background: rgba(0, 0, 0, 0.05);
        }
        
        .file-item i {
            font-size: 32px;
            margin-bottom: 5px;
            color: #3498db;
        }
        
        .file-item span {
            font-size: 12px;
            text-align: center;
        }

        /* 磁盘样式 */
        .disk-drive {
            display: flex;
            align-items: center;
            padding: 10px;
            margin: 10px 0;
            background: rgba(52, 152, 219, 0.2);
            border-radius: 5px;
            width: 90%; 
            cursor: pointer;
            transition: background 0.2s;
        }
        
        .disk-drive:hover {
            background: rgba(52, 152, 219, 0.5);
        }
        
        .disk-icon {
            width: 48px;
            height: 48px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-weight: bold;
            font-size: 45px;
        }
        
        .disk-info {
            flex: 1;
        }
        
        .disk-name {
            font-weight: 500;
            margin-bottom: 3px;
        }
        
        .disk-space {
            font-size: 12px;
            color: #666;
        }
        
        .disk-usage {
            height: 12px;
            background: #eee;
            border-radius: 3px;
            margin-top: 5px;
            overflow: hidden;
        }
        
        .disk-used {
            height: 100%;
            background: #3498db;
        }
        
        /* 右键菜单样式 */
        .context-menu {
            position: absolute;
            width: 180px;
            background: rgba(30, 30, 30, 0.95);
            border-radius: 5px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            display: none;
        }
        
        .context-menu.active {
            display: block;
        }
        
        .context-menu-item {
            padding: 8px 15px;
            font-size: 13px;
            cursor: pointer;
            transition: background 0.2s;
            display: flex;
            align-items: center;
        }
        
        .context-menu-item i {
            margin-right: 10px;
            width: 16px;
            text-align: center;
        }
        
        .context-menu-item:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        
        .context-menu-separator {
            height: 1px;
            background: rgba(255, 255, 255, 0.1);
            margin: 5px 0;
        }

        /* 搜索输入容器样式 */
        .search-input-container { 
            grid-column: span 3;
            padding: 15px;
        }

        /* 搜索输入框样式 */
        .search-input-container input[type="text"] { 
            width: 100%;
            padding: 10px;
            border-radius: 5px;
            border: none;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            box-sizing: border-box;
        }

        /* 搜索输入框占位符样式 */
        .search-input-container input[type="text"]::placeholder { 
            color: rgba(255, 255, 255, 0.5);
        }

        /* 输入框聚焦状态 */
        .search-input-container input[type="text"]:focus { 
            outline: none;
            background: rgba(255, 255, 255, 0.15);
        }

        /* 计算器样式 */
        .calculator {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 5px;
            padding: 10px;
            width: 100%;
            height: 100%;
        }

        .calculator-display {
            grid-column: 1 / span 4;
            height: 40px;
            background-color: #1e1e1e;
            color: white;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 0 10px;
            font-size: 18px;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        .calculator button {
            height: 40px;
            border: none;
            border-radius: 5px;
            background-color: #f0f0f0;
            cursor: pointer;
            font-size: 16px;
        }

        .calculator button:hover {
            background-color: #e0e0e0;
        }

        .calculator button.operator {
            background-color: #0078d7;
            color: white;
        }

        .calculator button.operator:hover {
            background-color: #106ebe;
        }

        /* 记事本样式 */
        .notepad-content {
            width: 100%;
            height: 100%;
            border: none;
            resize: none;
            font-family: 'Consolas', monospace;
            padding: 10px;
        }

    </style>
</head>
<body>
    <div class="desktop" id="desktop">
        
        <!-- 桌面图标 -->
        <div class="desktop-icons">     
            <!-- 图标将通过JavaScript动态生成 -->
        </div>
        
        <!-- 任务栏 -->
        <div class="taskbar">
            <!-- 左侧任务区 -->
            <div class="taskbar-left">
                <!-- 启动按钮 -->
                <div class="start-button" id="start-button">  
                    <i class="fa-brands fa-microsoft"></i>
                </div>
                <!-- 搜索按钮 -->
                <div class="taskbar-app" id="search-button">
                    <i class="fa-solid fa-search"></i>
                </div>   
            </div>

            <!-- 中间窗口图标区 -->
             <div class="taskbar-center" id="taskbar-apps"> 
             </div>

            <!-- 右侧系统托盘区 -->
            <div class="system-tray">
                <div class="tray-icon">
                    <i class="fa-solid fa-wifi"></i>
                </div>
                <div class="tray-icon">
                    <i class="fa-solid fa-volume-high"></i>
                </div>
                <div class="tray-icon">
                    <i class="fa-solid fa-battery-half"></i>
                </div>
                <div class="calendar" id="calendar-button">
                    <div class="clock" id="clock">14:25</div>
                    <div class="date" id="date">2023-05-01 星期六 </div>  
                </div> 
            </div>
        </div>
        
        <!-- 开始菜单 -->
        <div class="start-menu" id="startMenu">
            <div class="start-menu-header">
                <span>应用</span>
            </div>
            <div class="start-menu-apps">
                <!-- 图标将通过JavaScript动态生成 -->
            </div>
            <div class="start-menu-footer">
                <div class="user-info">
                    <div class="user-avatar">
                        <i class="fa-solid fa-user"></i>
                    </div>
                    <span>用户</span>
                </div>
                <div class="power-options">
                    <div class="power-option">
                        <i class="fa-solid fa-power-off"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- 任务栏搜索  -->
        <div class="start-menu search-menu" id="searchMenu">
            <div class="search-input-container">
                <input type="text" placeholder="搜索应用、设置和文件..." >
            </div>
        </div>

        <!-- 日历弹窗  -->
        <div class="calendar-popup" id="Calendar-Window">
            <!-- 日历头部 -->
            <div class="calendar-header">
                <button class="month-nav" id="prev-month">
                    <i class="fa fa-chevron-left"></i>
                </button>
                <h2 id="current-month">2023年1月</h2>
                <button class="month-nav" id="next-month">
                    <i class="fa fa-chevron-right"></i>
                </button>
            </div>
            
            <!-- 星期标题 -->
            <div class="date-grid weekdays">
                <div class="weekday">日</div>
                <div class="weekday">一</div>
                <div class="weekday">二</div>
                <div class="weekday">三</div>
                <div class="weekday">四</div>
                <div class="weekday">五</div>
                <div class="weekday">六</div>
            </div>
            
            <!-- 日期网格 -->
            <div id="dates-grid" class="date-grid">
                <!-- 日期将通过JavaScript动态生成 -->
            </div>
            
            <!-- 分割线 -->
            <div class="divider"></div>
            
            <!-- 选中日期详情 -->
            <div class="Calendar-Control" id="date-details">
                <div class="Calendar-Type">
                    <div class="Date-Style" id="Date-GregorianCalendar">2023年1月1日</div>
                    <div class="Date-Style" id="Date-LunarCalendar">农历十二月初十</div>
                </div>
                <div class="Calendar-Weeks-Festival">
                    <div class="Date-Style" id="Date-Weeks">星期一</div>
                    <div class="Date-Festivals" id="detail-festival">元旦</div>
                </div>
            </div>
        </div>

        <!-- 右键菜单 -->
        <div class="context-menu" id="contextMenu">
            <!-- 桌面右键菜单 -->
            <div class="context-menu-content" id="desktopContextMenu">
                <div class="context-menu-item" data-action="createNewFolder">
                    <i class="fa-solid fa-folder"></i>
                    <span>新建文件夹</span>
                </div>
                <div class="context-menu-item" data-action="createNewTextFile">
                    <i class="fa-solid fa-file-lines"></i>
                    <span>新建文本文档</span>
                </div>
                <div class="context-menu-separator"></div>
                <div class="context-menu-item" data-action="refreshDesktop">
                    <i class="fa-solid fa-arrows-rotate"></i>
                    <span>刷新</span>
                </div>
                <div class="context-menu-separator"></div>
                <div class="context-menu-item">
                    <i class="fa-solid fa-image"></i>
                    <span>个性化</span>
                </div>
            </div>
            
            <!-- 图标右键菜单 -->
            <div class="context-menu-content" id="iconContextMenu" style="display: none;">
                <div class="context-menu-item" data-action="openSelectedItem">
                    <i class="fa-solid fa-external-link-alt"></i>
                    <span>打开</span>
                </div>
                <div class="context-menu-item" data-action="renameSelectedItem">
                    <i class="fa-solid fa-pen"></i>
                    <span>重命名</span>
                </div>
                <div class="context-menu-separator"></div>
                <div class="context-menu-item" data-action="deleteSelectedItem">
                    <i class="fa-solid fa-trash"></i>
                    <span>删除</span>
                </div>
                <div class="context-menu-separator"></div>
                <div class="context-menu-item">
                    <i class="fa-solid fa-copy"></i>
                    <span>复制</span>
                </div>
                <div class="context-menu-item">
                    <i class="fa-solid fa-cut"></i>
                    <span>剪切</span>
                </div>
                <div class="context-menu-separator"></div>
                <div class="context-menu-item">
                    <i class="fa-solid fa-info-circle"></i>
                    <span>属性</span>
                </div>
            </div>
        </div>
        
        <!-- 窗口将通过JavaScript动态创建 -->
    </div>

    <script>

        // =================== 应用数据模块 ===================
        const AppData = {
            apps: [
                {
                    id: 'myComputer',
                    name: '我的电脑',
                    icon: 'fa-solid fa-desktop',
                    showOnDesktop: true,
                    showInStartMenu: true,
                    component: `
                        <div class="content-area">
                            <h1>我的电脑</h1>
                            <p>本地磁盘和设备</p>
                            <!-- C盘 -->
                            <div class="disk-drive" data-disk="C">
                                <div class="disk-icon">
                                   <i class="fa-regular fa-floppy-disk" style="color: #183153;"></i>
                                </div>
                                <div class="disk-info">
                                    <div class="disk-name">系统磁盘 (C:)</div>
                                    <div class="disk-space">43GB 可用，共 120GB</div>
                                    <div class="disk-usage">
                                        <div class="disk-used" style="width: 77%;"></div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- D盘 -->
                            <div class="disk-drive" data-disk="D">
                                <div class="disk-icon">
                                    <i class="fa-regular fa-floppy-disk" style="color: #183153;"></i>
                                </div>
                                <div class="disk-info">
                                    <div class="disk-name">本地磁盘 (D:)</div>
                                    <div class="disk-space">120GB 可用，共 200GB</div>
                                    <div class="disk-usage">
                                        <div class="disk-used" style="width: 40%;"></div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- E盘 -->
                            <div class="disk-drive" data-disk="E">
                                <div class="disk-icon">
                                    <i class="fa-regular fa-floppy-disk" style="color: #183153;"></i>
                                </div>
                                <div class="disk-info">
                                    <div class="disk-name">本地磁盘 (E:)</div>
                                    <div class="disk-space">80GB 可用，共 150GB</div>
                                    <div class="disk-usage">
                                        <div class="disk-used" style="width: 47%;"></div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- F盘 -->
                            <div class="disk-drive" data-disk="F">
                                <div class="disk-icon">
                                    <i class="fa-regular fa-floppy-disk" style="color: #183153;"></i>
                                </div>
                                <div class="disk-info">
                                    <div class="disk-name">本地磁盘 (F:)</div>
                                    <div class="disk-space">300GB 可用，共 500GB</div>
                                    <div class="disk-usage">
                                        <div class="disk-used" style="width: 40%;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `
                },
                {
                    id: 'fileExplorer',
                    name: '文件资源管理器',
                    icon: 'fa-solid fa-folder',
                    showOnDesktop: true,
                    showInStartMenu: true,
                    component: `
                        <div class="content-area">
                            <h1>文件资源管理器</h1>
                            <p>浏览您的文件和文件夹</p>
                            
                            <div class="file-explorer">
                                <div class="file-item">
                                    <i class="fa-solid fa-folder"></i>
                                    <span>文档</span>
                                </div>
                                <div class="file-item">
                                    <i class="fa-solid fa-folder"></i>
                                    <span>图片</span>
                                </div>
                                <div class="file-item">
                                    <i class="fa-solid fa-folder"></i>
                                    <span>音乐</span>
                                </div>
                                <div class="file-item">
                                    <i class="fa-solid fa-folder"></i>
                                    <span>视频</span>
                                </div>
                                <div class="file-item">
                                    <i class="fa-solid fa-file-word"></i>
                                    <span>报告.docx</span>
                                </div>
                                <div class="file-item">
                                    <i class="fa-solid fa-file-excel"></i>
                                    <span>预算.xlsx</span>
                                </div>
                            </div>
                        </div>
                    `
                },
                {
                    id: 'browser',
                    name: '浏览器',
                    icon: 'fa-solid fa-globe',
                    showOnDesktop: true,
                    showInStartMenu: true,
                    component: `
                        <div class="content-area">
                            <h1>浏览器</h1>
                            <p>欢迎使用浏览器！在这里您可以浏览网页。</p>
                            <input type="text" placeholder="输入网址..." style="width: 100%; padding: 8px; margin: 10px 0; border: 1px solid #ccc; border-radius: 4px;">
                            <button class="btn">搜索</button>
                        </div>
                    `
                },
                {
                    id: 'settings',
                    name: '设置',
                    icon: 'fa-solid fa-gear',
                    showOnDesktop: true,
                    showInStartMenu: true,
                    component: `
                        <div class="content-area">
                            <h1>设置</h1>
                            <p>系统设置和偏好配置</p>
                            
                            <div style="margin-top: 20px;">
                                <h3>显示设置</h3>
                                <div style="margin: 10px 0;">
                                    <label>亮度: </label>
                                    <input type="range" min="0" max="100" value="80" style="width: 200px;">
                                </div>
                                
                                <h3>个性化</h3>
                                <div style="display: flex; gap: 10px; margin: 10px 0;">
                                    <div style="width: 50px; height: 50px; background: #3498db; border-radius: 5px; cursor: pointer;"></div>
                                    <div style="width: 50px; height: 50px; background: #e74c3c; border-radius: 5px; cursor: pointer;"></div>
                                    <div style="width: 50px; height: 50px; background: #2ecc71; border-radius: 5px; cursor: pointer;"></div>
                                </div>
                            </div>
                        </div>
                    `
                },
                {
                    id: 'notepad',
                    name: '记事本',
                    icon: 'fa-solid fa-file-lines',
                    showOnDesktop: true,
                    showInStartMenu: true,
                    component: `
                        <textarea class="notepad-content" placeholder="在此输入文本..."></textarea>
                    `
                },
                {
                    id: 'calculator',
                    name: '计算器',
                    icon: 'fa-solid fa-calculator',
                    showOnDesktop: true,
                    showInStartMenu: true,
                    width: 300,
                    height: 400,
                    component: `
                        <div class="calculator">
                            <div class="calculator-display">0</div>
                            <button>C</button>
                            <button>±</button>
                            <button>%</button>
                            <button class="operator">÷</button>
                            <button>7</button>
                            <button>8</button>
                            <button>9</button>
                            <button class="operator">×</button>
                            <button>4</button>
                            <button>5</button>
                            <button>6</button>
                            <button class="operator">-</button>
                            <button>1</button>
                            <button>2</button>
                            <button>3</button>
                            <button class="operator">+</button>
                            <button style="grid-column: 1 / span 2;">0</button>
                            <button>.</button>
                            <button class="operator">=</button>
                        </div>
                    `
                }
            ],

            getAppById(id) {
                return this.apps.find(app => app.id === id);
            },
        };

        // =================== 系统状态模块 ===================
        const SystemState = {
            openWindows: [],
            activeWindow: null,
            zIndex: 100,
            selectedIcon: null,

            addWindow(window) {
                this.openWindows.push(window);
            },

            removeWindow(windowId) {
                this.openWindows = this.openWindows.filter(w => w.id !== windowId);
            },

            getWindowById(windowId) {
                return this.openWindows.find(w => w.id === windowId);
            },

            setActiveWindow(window) {
                this.activeWindow = window;
            },

            increaseZIndex() {
                this.zIndex += 1;
                return this.zIndex;
            }
        };

        // =================== 工具函数模块 ===================
        const Utils = {
            // 创建元素
            createElement(tag, className, innerHTML) {
                const element = document.createElement(tag);
                if (className) element.className = className;
                if (innerHTML) element.innerHTML = innerHTML;
                return element;
            },

            // 防抖函数
            debounce(func, wait) {
                let timeout;
                return function executedFunction(...args) {
                    const later = () => {
                        clearTimeout(timeout);
                        func(...args);
                    };
                    clearTimeout(timeout);
                    timeout = setTimeout(later, wait);
                };
            },

            // 事件委托
            delegateEvent(parent, selector, event, handler) {
                parent.addEventListener(event, function(e) {
                    if (e.target.matches(selector) || e.target.closest(selector)) {
                        handler(e);
                    }
                });
            }
        };

        // =================== 图标管理模块 ===================
        const IconManager = {
            // 初始化桌面图标
            initDesktopIcons() {
                const desktopIcons = document.querySelector('.desktop-icons');
                desktopIcons.innerHTML = '';
                
                AppData.apps.forEach(app => {
                    if (app.showOnDesktop) {
                        const icon = this.createDesktopIcon(app);
                        desktopIcons.appendChild(icon);
                    }
                });
            },
            
            // 创建桌面图标
            createDesktopIcon(app) {
                const icon = Utils.createElement('div', 'desktop-icon');
                icon.dataset.id = app.id;
                icon.innerHTML = `
                    <i class="${app.icon}"></i>
                    <span>${app.name}</span>
                `;
                
                // 添加事件监听
                icon.addEventListener('dblclick', () => {
                    WindowManager.open(app.id);
                });
                
                icon.addEventListener('contextmenu', (e) => {
                    e.preventDefault();
                    ContextMenuManager.deselectAllIcons();
                    icon.classList.add('selected');
                    SystemState.selectedIcon = icon;
                    ContextMenuManager.show(e, true);
                });
                
                return icon;
            },
            
            // 初始化开始菜单应用
            initStartMenuApps() {
                const startMenuApps = document.querySelector('#startMenu .start-menu-apps');
                startMenuApps.innerHTML = '';
                
                AppData.apps.forEach(app => {
                    if (app.showInStartMenu) {
                        const menuApp = this.createStartMenuApp(app);
                        startMenuApps.appendChild(menuApp);
                    }
                });
            },
            
            // 创建开始菜单应用
            createStartMenuApp(app) {
                const menuApp = Utils.createElement('div', 'start-menu-app');
                menuApp.dataset.id = app.id;
                menuApp.innerHTML = `
                    <i class="${app.icon}"></i>
                    <span>${app.name}</span>
                `;
                
                menuApp.addEventListener('click', () => {
                    WindowManager.open(app.id);
                    ContextMenuManager.hide();
                    MenuManager.hideAll();
                });
                
                return menuApp;
            }
        };

        // =================== 窗口管理模块 ===================
        const WindowManager = {
            // 打开应用
            open(appId) {
                const app = AppData.getAppById(appId);
                if (!app) return;
                
                // 检查应用是否已打开
                const existingWindow = SystemState.openWindows.find(w => w.appId === appId);
                if (existingWindow) {
                    this.focusWindow(existingWindow.id);
                    return;
                }
                
                // 创建新窗口
                const windowId = 'window-' + Date.now();
                const windowElement = Utils.createElement('div', 'window');
                windowElement.id = windowId;
                windowElement.style.width = (app.width || 700) + 'px';
                windowElement.style.height = (app.height || 500) + 'px';
                // 计算窗口位置 - 每次打开新窗口时向右下偏移30px
                const offset = SystemState.openWindows.length * 30;
                windowElement.style.left = (100 + offset) + 'px';
                windowElement.style.top = (50 + offset) + 'px';
                
                windowElement.innerHTML = `
                    <div class="window-header">
                        <div class="window-title">
                            <i class="${app.icon}"></i>
                            <span>${app.name}</span>
                        </div>
                        <div class="window-controls">
                            <div class="window-control minimize">
                                <i class="fa-solid fa-minus"></i>
                            </div>
                            <div class="window-control maximize">
                                <i class="fa-solid fa-square"></i>
                            </div>
                            <div class="window-control close">
                                <i class="fa-solid fa-xmark"></i>
                            </div>
                        </div>
                    </div>
                    <div class="window-content">
                        ${app.component}
                    </div>
                `;
                
                document.getElementById('desktop').appendChild(windowElement);
                
                // 添加到打开窗口列表
                const windowObj = {
                    id: windowId,
                    appId: appId,
                    appName: app.name,
                    element: windowElement,
                    minimized: false,
                    maximized: false
                };
                
                SystemState.addWindow(windowObj);
                this.focusWindow(windowId);
                
                // 添加窗口控制事件
                this.attachWindowEvents(windowElement, windowId);
                
                // 初始化应用特定功能
                this.initAppSpecificFeatures(appId, windowElement);
                
                // 更新任务栏
                this.updateTaskbar();
            },

            // 聚焦窗口
            focusWindow(windowId) {
                SystemState.openWindows.forEach(window => {
                    window.element.classList.remove('active');
                    if (window.id === windowId) {
                        window.element.classList.add('active');
                        SystemState.setActiveWindow(window);
                        // 提高z-index
                        window.element.style.zIndex = SystemState.increaseZIndex();
                    }
                });
                this.updateTaskbar();
            },

            // 最小化窗口
            minimizeWindow(windowId) {
                const window = SystemState.getWindowById(windowId);
                if (window) {
                    window.minimized = true;
                    window.element.style.display = 'none';
                    this.updateTaskbar();
                }
            },

            // 切换窗口最大化
            toggleMaximizeWindow(windowId) {
                const window = SystemState.getWindowById(windowId);
                if (window) {
                    if (window.maximized) {
                        // 恢复窗口
                        window.element.style.width = window.originalWidth;
                        window.element.style.height = window.originalHeight;
                        window.element.style.left = window.originalLeft;
                        window.element.style.top = window.originalTop;
                        window.maximized = false;
                        window.element.classList.remove('maximized');
                        
                        // 重新启用拖拽
                        this.makeDraggable(window.element, window.element.querySelector('.window-header'), windowId);
                    } else {
                        // 保存原始尺寸和位置
                        window.originalWidth = window.element.style.width;
                        window.originalHeight = window.element.style.height;
                        window.originalLeft = window.element.style.left;
                        window.originalTop = window.element.style.top;
                        
                        // 最大化
                        window.element.style.width = 'calc(100% - 20px)';
                        window.element.style.height = 'calc(100% - 68px)';
                        window.element.style.left = '10px';
                        window.element.style.top = '10px';
                        window.maximized = true;
                        window.element.classList.add('maximized');
                        
                        // 禁用拖拽
                        const header = window.element.querySelector('.window-header');
                        header.onmousedown = null;
                    }
                }
            },

            // 关闭窗口
            closeWindow(windowId) {
                const window = SystemState.getWindowById(windowId);
                if (window) {
                    window.element.remove();
                    SystemState.removeWindow(windowId);
                    
                    if (SystemState.activeWindow && SystemState.activeWindow.id === windowId) {
                        SystemState.setActiveWindow(
                            SystemState.openWindows.length > 0 ? 
                            SystemState.openWindows[SystemState.openWindows.length - 1] : null
                        );
                        
                        if (SystemState.activeWindow) {
                            this.focusWindow(SystemState.activeWindow.id);
                        }
                    }
                    
                    this.updateTaskbar();
                }
            },

            // 附加窗口事件
            attachWindowEvents(windowElement, windowId) {
                const header = windowElement.querySelector('.window-header');
                const minimizeBtn = windowElement.querySelector('.minimize');
                const maximizeBtn = windowElement.querySelector('.maximize');
                const closeBtn = windowElement.querySelector('.close');
                
                // 拖拽功能
                this.makeDraggable(windowElement, header, windowId);
                
                // 窗口控制
                minimizeBtn.addEventListener('click', () => this.minimizeWindow(windowId));
                maximizeBtn.addEventListener('click', () => this.toggleMaximizeWindow(windowId));
                closeBtn.addEventListener('click', () => this.closeWindow(windowId));
            },

            // 使元素可拖拽
            makeDraggable(element, handle, windowId) {
                let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
                let isDragging = false;
                
                handle.onmousedown = dragMouseDown;
                
                function dragMouseDown(e) {
                    // 检查窗口是否最大化，如果是则不允许拖拽
                    const windowObj = SystemState.getWindowById(windowId);
                    if (windowObj && windowObj.maximized) {
                        return;
                    }
                    
                    e.preventDefault();
                    // 获取鼠标位置
                    pos3 = e.clientX;
                    pos4 = e.clientY;
                    document.onmouseup = closeDragElement;
                    document.onmousemove = elementDrag;
                    WindowManager.focusWindow(element.id);
                    
                    isDragging = true;
                }
                
                function elementDrag(e) {
                    if (!isDragging) return;
                    
                    e.preventDefault();
                    // 计算新位置
                    pos1 = pos3 - e.clientX;
                    pos2 = pos4 - e.clientY;
                    pos3 = e.clientX;
                    pos4 = e.clientY;
                    
                    // 设置元素新位置
                    element.style.left = (element.offsetLeft - pos1) + "px";
                    element.style.top = (element.offsetTop - pos2) + "px";
                    
                    // 检查是否进入最大化区域
                    const windowObj = SystemState.getWindowById(windowId);
                    if (windowObj && !windowObj.maximized) {
                        const elementTop = parseInt(element.style.top) || 0;
                        const maximizeThreshold = 10; // 距离顶部多少像素触发最大化
                        
                        if (elementTop <= maximizeThreshold) {
                            element.style.boxShadow = '0 0 0 2px rgba(0, 120, 215, 0.8)';
                        } else {
                            element.style.boxShadow = '';
                        }
                    }
                }
                
                function closeDragElement() {
                    document.onmouseup = null;
                    document.onmousemove = null;
                    
                    if (!isDragging) return;
                    isDragging = false;
                    
                    // 检查是否在最大化区域释放
                    const windowObj = SystemState.getWindowById(windowId);
                    if (windowObj && !windowObj.maximized) {
                        const elementTop = parseInt(element.style.top) || 0;
                        const maximizeThreshold = 10; // 距离顶部多少像素触发最大化
                        
                        if (elementTop <= maximizeThreshold) {
                            WindowManager.toggleMaximizeWindow(windowId);
                        } else {
                            element.style.boxShadow = '';
                        }
                    }
                }
            },

            // 更新任务栏
            updateTaskbar() {
                const taskbarApps = document.getElementById('taskbar-apps');
                taskbarApps.innerHTML = '';
                
                SystemState.openWindows.forEach(window => {
                    const app = AppData.getAppById(window.appId);
                    if (!app) return;
                    
                    const taskbarApp = Utils.createElement('div', 
                        `taskbar-app ${window === SystemState.activeWindow ? 'active' : ''}`);
                    taskbarApp.innerHTML = `<i class="${app.icon}"></i>`;
                    
                    taskbarApp.addEventListener('click', () => {
                        if (window.minimized) {
                            // 恢复窗口
                            window.element.style.display = 'flex';
                            window.minimized = false;
                            this.focusWindow(window.id);
                        } else if (window === SystemState.activeWindow) {
                            // 最小化当前活动窗口
                            this.minimizeWindow(window.id);
                        } else {
                            // 聚焦窗口
                            this.focusWindow(window.id);
                        }
                    });
                    
                    taskbarApps.appendChild(taskbarApp);
                });
            },

            // 初始化应用特定功能
            initAppSpecificFeatures(appId, windowElement) {
                if (appId === 'myComputer') {
                    this.initMyComputer(windowElement);
                }
            },

            // 初始化我的电脑
            initMyComputer(windowElement) {
                const diskDrives = windowElement.querySelectorAll('.disk-drive');
                
                diskDrives.forEach(drive => {
                    drive.addEventListener('click', () => {
                        const diskLetter = drive.dataset.disk;
                        this.showDiskContent(diskLetter);
                    });
                });
            },

            // 显示磁盘内容
            showDiskContent(diskLetter) {
                const diskContent = document.getElementById('diskContent');
                const currentDiskTitle = document.getElementById('currentDiskTitle');
                const diskFiles = document.getElementById('diskFiles');
                
                currentDiskTitle.textContent = `本地磁盘 (${diskLetter}:)`;
                diskFiles.innerHTML = '';
                
                // 添加新内容
                AppData.getDiskContent(diskLetter).forEach(item => {
                    const fileItem = Utils.createElement('div', 'file-item');
                    
                    if (item.type === 'folder') {
                        fileItem.innerHTML = `
                            <i class="fa-solid fa-folder"></i>
                            <span>${item.name}</span>
                        `;
                    } else {
                        fileItem.innerHTML = `
                            <i class="fa-solid ${item.icon}"></i>
                            <span>${item.name}</span>
                        `;
                    }
                    
                    diskFiles.appendChild(fileItem);
                });
                
                diskContent.style.display = 'block';
                // 滚动到磁盘内容区域
                diskContent.scrollIntoView({ behavior: 'smooth' });
            }
        };

        // =================== 菜单管理模块 ===================
        const MenuManager = {
            // 开始菜单控制
            toggleMenu(menuId) {
                const targetMenu = document.getElementById(menuId);
                if (!targetMenu) {
                    console.warn(`无法找到ID为${menuId}的菜单`);
                    return;
                }
                
                document.querySelectorAll('.start-menu').forEach(menu => {
                    if (menu.id !== menuId) menu.classList.remove('active');
                });
                
                targetMenu.classList.toggle('active');
                ContextMenuManager.hide();
            },

            // 隐藏所有菜单
            hideAll() {
                document.querySelectorAll('.start-menu').forEach(menu => {
                    menu.classList.remove('active');
                });
            }
        };

        // =================== 右键菜单管理模块 ===================
        const ContextMenuManager = {
            // 显示右键菜单
            show(e, isIcon = false) {
                e.preventDefault();
                // 先隐藏所有右键菜单
                this.hide();

                // 隐藏之前的选择状态
                if (!isIcon) {
                    this.deselectAllIcons();
                    SystemState.selectedIcon = null;
                }

                // 显示相应的菜单内容
                const desktopContextMenu = document.getElementById('desktopContextMenu');
                const iconContextMenu = document.getElementById('iconContextMenu');
                
                if (isIcon) {
                    desktopContextMenu.style.display = 'none';
                    iconContextMenu.style.display = 'block';
                } else {
                    desktopContextMenu.style.display = 'block';
                    iconContextMenu.style.display = 'none';
                }

                // 定位菜单
                const desktop = document.getElementById('desktop');
                const contextMenu = document.getElementById('contextMenu');
                const desktopRect = desktop.getBoundingClientRect();

                let x = e.clientX - desktopRect.left;
                let y = e.clientY - desktopRect.top;
                
                // 设置初始位置
                contextMenu.style.left = x + 'px';
                contextMenu.style.top = y + 'px';
                contextMenu.classList.add('active');
                contextMenu.style.display = 'block';
               
                // 获取菜单实际尺寸
                const menuRect = contextMenu.getBoundingClientRect();

                // 边界检测和调整
                if (menuRect.right > desktopRect.right) {
                    contextMenu.style.left = (x - menuRect.width) + 'px';
                }

                // 检查下边界（避免被任务栏遮挡）
                if (menuRect.bottom > desktopRect.bottom - 48) { // 48px 是任务栏高度
                    contextMenu.style.top = (y - menuRect.height) + 'px';
                }    
            },

            // 隐藏右键菜单
            hide() {
                const contextMenu = document.getElementById('contextMenu');
                contextMenu.classList.remove('active');
                contextMenu.style.display = 'none';
            },

            // 取消选择所有图标
            deselectAllIcons() {
                document.querySelectorAll('.desktop-icon').forEach(icon => {
                    icon.classList.remove('selected');
                });
            },

             // 刷新桌面
            refreshDesktop() {
                this.hide();
                console.log('刷新桌面');
            },

            // 统一的文件创建函数
            createNewFile(type, iconClass, defaultName) {
                this.hide();
                
                // 创建新文件图标
                const newFileId = `${type}_${Date.now()}`;
                const desktopIconsContainer = document.querySelector('.desktop-icons');
                
                const newFile = Utils.createElement('div', 'desktop-icon');
                newFile.dataset.id = newFileId;
                newFile.innerHTML = `
                    <i class="fa-solid ${iconClass}"></i>
                    <span class="icon-name" contenteditable="true">${defaultName}</span>
                `;
                
                desktopIconsContainer.appendChild(newFile);

                // 添加事件监听器
                newFile.addEventListener('contextmenu', function(e) {
                    e.preventDefault();
                    ContextMenuManager.deselectAllIcons();
                    this.classList.add('selected');
                    SystemState.selectedIcon = this;
                    ContextMenuManager.show(e, true);
                });
                
                // 聚焦并选中文件名
                const nameSpan = newFile.querySelector('.icon-name');
                setTimeout(() => {
                    nameSpan.focus();
                }, 0);
                
                // 编辑完成后取消可编辑状态
                const finishEdit = function() {
                    this.removeAttribute('contenteditable');  
                };

                nameSpan.addEventListener('blur', finishEdit, { once: true });
                
                // 按Enter键完成编辑
                nameSpan.addEventListener('keydown', function(e) {
                    if (e.key === 'Enter') {
                        e.preventDefault();
                        this.removeAttribute('contenteditable');
                        this.blur();
                    }
                });
            },

            // 创建新文件夹
            createNewFolder() {
                this.createNewFile('folder', 'fa-folder', '新建文件夹');
            },

            // 创建新文本文档
            createNewTextFile() {
                this.createNewFile('file', 'fa-file-lines', '新建文本文档.txt');
            },

            // 打开选中项
            openSelectedItem() {
                if (SystemState.selectedIcon) {
                    const iconId = SystemState.selectedIcon.dataset.id;
                    this.hide();
                    
                    // 如果是系统图标，打开对应的窗口
                    if (['myComputer', 'fileExplorer', 'browser', 'settings', 'notepad', 'calculator'].includes(iconId)) {
                        WindowManager.open(iconId);
                    } else {
                        // 对于用户创建的文件/文件夹，这里可以添加相应的打开逻辑
                        alert('打开: ' + SystemState.selectedIcon.querySelector('span').textContent);
                    }
                }
            },

            // 重命名选中项
            renameSelectedItem() {
                if (SystemState.selectedIcon) {
                    this.hide();

                    const nameSpan = SystemState.selectedIcon.querySelector('span');
                    nameSpan.setAttribute('contenteditable', 'true');
                    nameSpan.focus();
                    
                    // 全选文本内容
                    const range = document.createRange();
                    const selection = window.getSelection();
                    range.selectNodeContents(nameSpan);
                    selection.removeAllRanges();
                    selection.addRange(range);

                    // 编辑完成后取消可编辑状态
                    nameSpan.addEventListener('blur', function() {
                        this.removeAttribute('contenteditable');
                    });
                    
                    // 按Enter键完成编辑
                    nameSpan.addEventListener('keydown', function(e) {
                        if (e.key === 'Enter') {
                            e.preventDefault();
                            this.removeAttribute('contenteditable');
                            this.blur();
                        }
                    });
                }
            },

            // 删除选中项
            deleteSelectedItem() {
                if (SystemState.selectedIcon && 
                    confirm('确定要删除 ' + SystemState.selectedIcon.querySelector('span').textContent + ' 吗？')) {
                    SystemState.selectedIcon.remove();
                    SystemState.selectedIcon = null;
                    this.hide();
                }
            }
        };

        // =================== 日历管理模块 ===================
        const CalendarManager = {
            allowedFestivals: [
                "元旦节","腊八节","小年","除夕","春节","元宵节","情人节","妇女节",
                "植树节","愚人节","劳动节","端午节","儿童节","七夕节","建军节",
                "中元节","教师节","九一八","国庆节","中秋节","重阳节","老人节",
                "平安夜","圣诞节"
            ],
            
            allowedTerms: [
                "小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏",
                "小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分",
                "寒露","霜降","立冬","小雪","大雪","冬至"
            ],

            currentDate: new Date(),
            displayMonth: new Date(),
            selectedDate: new Date(),

            // 初始化日历
            init() {
                this.bindEvents();
                this.updateDateTime();
                this.renderCalendar();
                this.updateDateDetails(this.selectedDate);
                
                setInterval(() => this.updateDateTime(), 1000);
            },

            // 过滤节日名称
            filterName(name, allowedList) {
                if (!name) return null;
                
                if (allowedList.includes(name)) {
                    return name;
                }
                
                for (const allowed of allowedList) {
                    if (name.includes(allowed)) {
                        return allowed;
                    }
                }
                
                return null;
            },

            // 获取节日信息
            getFestivalsInfo(lunarInfo) {
                const festivals = [];
                
                const solarFestival = this.filterName(lunarInfo.solarFestival, this.allowedFestivals);
                const lunarFestival = this.filterName(lunarInfo.lunarFestival, this.allowedFestivals);
                const term = this.filterName(lunarInfo.term, this.allowedTerms);
                
                if (solarFestival) festivals.push(solarFestival);
                if (lunarFestival) festivals.push(lunarFestival);
                if (term) festivals.push(term);
                
                return festivals;
            },

            // 绑定事件
            bindEvents() {
                const calendarButton = document.getElementById('calendar-button');
                const prevMonthButton = document.getElementById('prev-month');
                const nextMonthButton = document.getElementById('next-month');
                const calendarPopup = document.getElementById('Calendar-Window');

                calendarButton.addEventListener('click', (e) => {
                    e.stopPropagation();
                    this.toggleCalendar();
                });

                prevMonthButton.addEventListener('click', (e) => {
                    e.stopPropagation();
                    this.navigateMonth(-1);
                });

                nextMonthButton.addEventListener('click', (e) => {
                    e.stopPropagation();
                    this.navigateMonth(1);
                });

                document.addEventListener('click', (e) => {
                    if (!calendarPopup.contains(e.target) && 
                        e.target !== calendarButton && 
                        !calendarButton.contains(e.target)) {
                        this.hideCalendar();
                    }
                });
            },

            // 更新时间显示
            updateDateTime() {
                const now = new Date();
                const clockElement = document.getElementById('clock');
                const dateElement = document.getElementById('date');
                
                // 更新时间
                const hours = now.getHours().toString().padStart(2, '0');
                const minutes = now.getMinutes().toString().padStart(2, '0');
                clockElement.textContent = `${hours}:${minutes}`;
                
                // 更新日期
                const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
                const weekday = weekdays[now.getDay()];
                const year = now.getFullYear();
                const month = now.getMonth() + 1;
                const day = now.getDate();
                dateElement.textContent = `${year}-${month}-${day} ${weekday}`;
                
                // 如果日期变更，更新日历
                if (now.getDate() !== this.currentDate.getDate() || 
                    now.getMonth() !== this.currentDate.getMonth() || 
                    now.getFullYear() !== this.currentDate.getFullYear()) {
                    this.currentDate = new Date(now);
                    this.selectedDate = new Date(now);
                    this.renderCalendar();
                    this.updateDateDetails(this.selectedDate);
                }
            },

            // 切换日历显示/隐藏
            toggleCalendar() {
                const calendarPopup = document.getElementById('Calendar-Window');
                if (!calendarPopup.classList.contains('visible')) {
                    this.selectedDate = new Date(this.currentDate);
                    this.displayMonth = new Date(this.currentDate);
                    this.showCalendar();
                } else {
                    this.hideCalendar();
                }
            },

            // 显示日历
            showCalendar() {
                const calendarPopup = document.getElementById('Calendar-Window');
                calendarPopup.classList.remove('hiding');
                calendarPopup.classList.add('visible');
                this.renderCalendar();
                this.updateDateDetails(this.selectedDate);
            },

            // 隐藏日历
            hideCalendar() {
                const calendarPopup = document.getElementById('Calendar-Window');
                if (calendarPopup.classList.contains('visible')) {
                    calendarPopup.classList.remove('visible');
                    calendarPopup.classList.add('hiding');
                    
                    setTimeout(() => {
                        calendarPopup.classList.remove('hiding');
                    }, 200);
                }
            },

            // 月份导航
            navigateMonth(direction) {
                this.displayMonth.setMonth(this.displayMonth.getMonth() + direction);
                this.renderCalendar();
            },

            // 渲染日历
            renderCalendar() {
                const year = this.displayMonth.getFullYear();
                const month = this.displayMonth.getMonth() + 1;
                const currentMonthElement = document.getElementById('current-month');
                const datesGrid = document.getElementById('dates-grid');
                
                currentMonthElement.textContent = `${year}年${month}月`;
                datesGrid.innerHTML = '';
                
                const firstDay = new Date(year, month - 1, 1);
                const lastDay = new Date(year, month, 0);
                const firstDayOfWeek = firstDay.getDay();
                
                const prevMonth = new Date(year, month - 1, 0);
                const prevMonthDays = prevMonth.getDate();
                
                for (let i = 0; i < firstDayOfWeek; i++) {
                    const day = prevMonthDays - firstDayOfWeek + i + 1;
                    const dateEl = this.createDateElement(
                        day, 
                        new Date(year, month - 2, day),
                        false
                    );
                    datesGrid.appendChild(dateEl);
                }
                
                for (let i = 1; i <= lastDay.getDate(); i++) {
                    const date = new Date(year, month - 1, i);
                    const isToday = this.isSameDay(date, this.currentDate);
                    const isSelected = this.isSameDay(date, this.selectedDate);
                    
                    const dateEl = this.createDateElement(
                        i, 
                        date,
                        true,
                        isToday,
                        isSelected
                    );
                    datesGrid.appendChild(dateEl);
                }
                
                const totalDays = firstDayOfWeek + lastDay.getDate();
                const nextMonthDaysNeeded = 42 - totalDays;
                
                for (let i = 1; i <= nextMonthDaysNeeded; i++) {
                    const dateEl = this.createDateElement(
                        i, 
                        new Date(year, month, i),
                        false
                    );
                    datesGrid.appendChild(dateEl);
                }
            },

            // 创建日期元素
            createDateElement(day, date, isCurrentMonth, isToday = false, isSelected = false) {
                const year = date.getFullYear();
                const month = date.getMonth() + 1;
                
                const lunarInfo = LunarCalendar.solarToLunar(year, month, day);
                const festivals = this.getFestivalsInfo(lunarInfo);
                
                const dateEl = document.createElement('div');
                dateEl.className = 'date-cell';
                
                if (!isCurrentMonth) {
                    dateEl.classList.add('other-month');
                } else {
                    dateEl.classList.add('current-month');
                    
                    if (isToday) {
                        dateEl.classList.add('today');
                    }
                    
                    if (isSelected) {
                        dateEl.classList.add('selected');
                    }
                    
                    dateEl.addEventListener('click', (e) => {
                        e.stopPropagation();
                        this.selectedDate = new Date(date);
                        this.renderCalendar();
                        this.updateDateDetails(this.selectedDate);
                    });
                }
                
                const solarEl = document.createElement('div');
                solarEl.className = 'solar-day';
                solarEl.textContent = day;
                dateEl.appendChild(solarEl);
                
                const lunarOrFestivalEl = document.createElement('div');
                lunarOrFestivalEl.className = 'lunar-info';
                
                if (festivals.length > 0 && isCurrentMonth) {
                    lunarOrFestivalEl.textContent = festivals[0];
                    lunarOrFestivalEl.classList.add('festival');
                } else {
                    lunarOrFestivalEl.textContent = lunarInfo.lunarDayName;
                }
                
                dateEl.appendChild(lunarOrFestivalEl);
                
                return dateEl;
            },

            // 更新日期详情
            updateDateDetails(date) {
                const year = date.getFullYear();
                const month = date.getMonth() + 1;
                const day = date.getDate();
                const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
                const weekday = weekdays[date.getDay()];
                
                const lunarInfo = LunarCalendar.solarToLunar(year, month, day);
                const festivals = this.getFestivalsInfo(lunarInfo);
                
                document.getElementById('Date-GregorianCalendar').textContent = `${year}年${month}月${day}日`;
                document.getElementById('Date-Weeks').textContent = `${weekday}`;
                
                if (festivals.length > 0) {
                    document.getElementById('Date-LunarCalendar').textContent = `${lunarInfo.lunarMonthName}${lunarInfo.lunarDayName}`;
                    document.getElementById('detail-festival').textContent = festivals.join('、');
                    document.getElementById('detail-festival').classList.remove('hidden');
                } else {
                    document.getElementById('Date-LunarCalendar').textContent = `${lunarInfo.lunarMonthName}${lunarInfo.lunarDayName}`;
                    document.getElementById('detail-festival').textContent = '';
                    document.getElementById('detail-festival').classList.add('hidden');
                }
            },

            // 判断是否是同一天
            isSameDay(date1, date2) {
                return date1.toDateString() === date2.toDateString();
            }
        };

        // =================== 事件管理模块 ===================
        const EventManager = {
            // 初始化事件
            init() {
                // 全局点击事件
                document.addEventListener('click', this.handleGlobalClick.bind(this));
                
                // 开始菜单和搜索按钮事件
                document.getElementById('start-button').addEventListener('click', function(e) {
                    e.stopPropagation(); // 添加这行
                    MenuManager.toggleMenu('startMenu');
                });
                document.getElementById('search-button').addEventListener('click', function(e) {
                    e.stopPropagation(); // 添加这行
                    MenuManager.toggleMenu('searchMenu');
                });

                // 桌面右键菜单事件
                document.getElementById('desktop').addEventListener('contextmenu', 
                    this.showDesktopContextMenu.bind(this));
                
                // 右键菜单项事件委托
                Utils.delegateEvent(document.getElementById('contextMenu'), '.context-menu-item', 'click', 
                    this.handleContextMenuItemClick.bind(this));
                
                // 桌面图标双击事件
                Utils.delegateEvent(document.querySelector('.desktop-icons'), '.desktop-icon', 'dblclick', 
                    this.handleDesktopIconDoubleClick.bind(this));
                
                // 开始菜单应用点击事件
                Utils.delegateEvent(document.getElementById('startMenu'), '.start-menu-app', 'click', 
                    this.handleStartMenuAppClick.bind(this));
            },

            // 处理全局点击
            handleGlobalClick(e) {
                const startMenu = document.getElementById('startMenu');
                const searchMenu = document.getElementById('searchMenu');
                const startButton = document.getElementById('start-button');
                const searchButton = document.getElementById('search-button');
                const contextMenu = document.getElementById('contextMenu');
                const desktop = document.getElementById('desktop');
                
                // 点击桌面区域隐藏开始菜单和右键菜单
                if (!startMenu.contains(e.target) && e.target !== startButton && 
                    !searchMenu.contains(e.target) && e.target !== searchButton) {
                    MenuManager.hideAll();
                }
                
                if (!contextMenu.contains(e.target)) {
                    ContextMenuManager.hide();
                }
                
                // 点击桌面区域取消图标选择
                if (e.target === desktop) {
                    ContextMenuManager.deselectAllIcons();
                    SystemState.selectedIcon = null;
                }
            },

            // 处理右键菜单项点击
            handleContextMenuItemClick(e) {
                const action = e.target.closest('.context-menu-item').dataset.action;
                if (action && ContextMenuManager[action]) {
                    ContextMenuManager[action]();
                }
            },

            // 处理桌面图标双击
            handleDesktopIconDoubleClick(e) {
                const icon = e.target.closest('.desktop-icon');
                const appId = icon.dataset.id;
                WindowManager.open(appId);
            },

            // 处理开始菜单应用点击
            handleStartMenuAppClick(e) {
                const app = e.target.closest('.start-menu-app');
                const appId = app.dataset.id;
                WindowManager.open(appId);
                ContextMenuManager.hide();
                MenuManager.hideAll();
            },

            // 显示桌面右键菜单
            showDesktopContextMenu(e) {
                // 检查点击是否是桌面图标
                const icon = e.target.closest('.desktop-icon');

                if (icon) {
                    // 图标右键菜单
                    e.preventDefault();
                    ContextMenuManager.deselectAllIcons();
                    icon.classList.add('selected');
                    SystemState.selectedIcon = icon;
                    ContextMenuManager.show(e, true);
                } else if (!e.target.closest('#contextMenu')) {
                    // 检查是否点击在已打开的窗口上
                    const clickedOnWindow = e.target.closest('.window');
                    if (clickedOnWindow) {
                        // 如果点击在窗口上，聚焦该窗口
                        WindowManager.focusWindow(clickedOnWindow.id);
                    } else {
                        // 桌面右键菜单
                        e.preventDefault();
                        ContextMenuManager.show(e, false);
                    }
                }

                // 隐藏开始菜单
                MenuManager.hideAll();
            }
        };

        // =================== 初始化函数 ===================
        function init() {
            // 初始化图标
            IconManager.initDesktopIcons();
            IconManager.initStartMenuApps();

            // 初始化日历
            CalendarManager.init();
            
            // 初始化事件
            EventManager.init();
        }

        // 启动初始化
        window.onload = init;
    </script>
</body>
</html>